<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖函数</title>
</head>
<style>
    #nig {
        width: 300px;
        height: 300px;
        background-color: deeppink;
    }
</style>
<body>
<div>
    <h3>防抖实例：搜索框延迟搜索</h3>
    <label for="input"></label><input id="input">
    <h3>节流实例：</h3>
    <div id="nig"></div>
</div>
</body>
<script>
    //《一. 防抖实现：以搜索框延迟搜索为例》

    const delay = 1000

    // 周神法：
    // let timer
    //
    // function debounce(delay, value) {
    //     clearTimeout(timer)
    //
    //     timer = setTimeout(function () {
    //         console.log(value)
    //     }, delay)
    //
    //     console.log(timer)
    // }

    // 函数工厂法：
    function debounce(delay) {
        let timer
        return function (value) {
            clearTimeout(timer)
            timer = setTimeout(function () {
                console.log(value)
            }, delay)
        }
    }

    let input = document.getElementById('input');
    let debounceRFunc = debounce(1000);
    input.addEventListener('keyup', function (e) {
        // debounce(delay, e.target.value)
        debounceRFunc(e.target.value)
    })

    //《二. 节流实例：鼠标在区域内移动时，触发且只在一定时间内触发一次某一事件。鼠标移出又已回区域后，还能正常触发》

    // 标志位法：
    function throttleFactory1(specifiedTime) {
        let flag = true
        return function () {
            if (!flag) {
                return
            }
            flag = false
            setTimeout(function () {
                console.log('触发目标事件！')
                // 触发后要把标志位归位，让下一次可以过if判断！不然这个事件永远只能触发一次！
                flag = true
            }, specifiedTime)
        }
    }

    // 时间戳法：
    function throttleFactory2(specifiedTime) {
        let prev = 0

        return function () {
            let now = Date.now()
            if (now - prev > specifiedTime){
                console.log('触发目标事件！')
                prev = now
            }
        }
    }

    let nigDiv = document.getElementById('nig')
    // 第二个参数就是事件触发时的回调函数，所以根本不需要另外声明变量来接收throttleFactory(1000)
    nigDiv.addEventListener('mousemove', throttleFactory1(1000))
</script>
</html>